<template>
    <div class="pagination-wrap">
        <el-pagination
            background 
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :hide-on-single-page="value"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30]"
            :page-size="+pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
        ></el-pagination>
    </div>
</template>

<script>
export default {
    name: 'commonpagination',
    props: {
        total: {
            required: true
        },
        size: {
            required: true,
            type: [Number, String],
            default: 10
        },
        page: {
            default: 1
        }
    },
    data() {
        return {
            value: false,
            pageSize: this.size
        };
    },

    computed: {
        currentPage() {
            return +this.page;
        }
    },

    mounted() {
        // 首次加载只有一页数据时 不显示分页器
        const totalPage = Math.ceil(this.total / this.size);
        if (totalPage <= 1) this.value = true;
    },

    methods: {
        handleSizeChange(val) {
            this.$emit('size-change', val);
            this.pageSize = val;
            this.value = false;
        },

        handleCurrentChange(val) {
            this.$emit('page-change', val);
        }
    }
};
</script>

<style  scoped>
>>>.el-pagination {
    text-align: center;
    margin-top: 20px;
}
.pagination-wrap /deep/ .active{
    background-color: #FFC267 !important;
}
.el-input__inner:focus{
	border-color: #FFC267;
}
</style>
